<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
  <h2>总价格:{{total}}</h2>
</div>

<script type="text/javascript">
  /*计算属性比方法便捷 多次调用内部只调用一次 */
  const  app =new Vue({
    el:"#app",
    data:{
      books:[
        {id:110,name:'Uxix',price:110},
        {id:111,name:'aimadaquan',price:105},
        {id:112,name:'shenrulijiejisuanji',price:90},
        {id:113,name:'xiandaicaozuo',price:87},
      ]
    },
    computed:{
      total:function(){
		  let result=0
        for(let i=0;i<this.books.length;i++){
          result +=this.books[i].price
        }
        return result
      }
    }
  })
</script>



</body>
</html>